<template>
	<div class="flex items-center gap-[2px]">
		<div
			class="w-9 h-7 rounded-l-[16px] bg-bg-3 flex justify-center items-center app-bg-react"
			:class="prevDisabled ? 'opacity-50' : ''"
			@click="!prevDisabled && emits('prev')">
			<base-icon name="back"></base-icon>
		</div>
		<div
			class="w-9 h-7 rounded-r-[16px] bg-bg-3 flex justify-center items-center app-bg-react"
			:class="nextDisabled ? 'opacity-50' : ''"
			@click="!nextDisabled && emits('next')">
			<base-icon name="go"></base-icon>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base'

defineProps({
	prevDisabled: {
		type: Boolean,
		default: false
	},
	nextDisabled: {
		type: Boolean,
		default: false
	}
})

const emits = defineEmits(['prev', 'next'])
</script>
